<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<!-- <head>Layui</head> -->
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<link rel="stylesheet" href="layui/css/layui.css">
	</head>
	<body>
		<div class="layui-layout layui-layout-admin" style="margin-left: 30px;">
			<!-- <div class="layui-body"> -->
			<fieldset class="layui-elem-field layui-field-title">
				<legend>文件全局配置</legend>
			</fieldset>

			<form class="layui-form" action="">

				<!-----------------------------------全局配置 start----------------------------------->
				<div id="globalConfig">

					<div class="layui-form-item">
						<div class="layui-inline">
							<label class="layui-form-label">分隔符</label>
							<div class="layui-input-inline">
								<input type="text" name="separator" autocomplete="on" class="layui-input">
							</div>

						</div>
					</div>

					<div class="layui-form-item">
						<label class="layui-form-label">文件编码</label>
						<div class="layui-input-inline">
							<select name="fileEncoding" lay-filter="fileEncoding">
								<option value="UTF-8" selected="">UTF-8</option>
								<option value="GBK">GBK</option>
							</select>
						</div>
					</div>

					<div class="layui-form-item">
						<label class="layui-form-label">字段左占位</label>
						<div class="layui-input-block">
							<input type="checkbox" name="leftAlign" lay-skin="switch" lay-text="TRUE|FALSE">
						</div>
					</div>
					<div class="layui-form-item">
						<label class="layui-form-label">字段右占位</label>
						<div class="layui-input-block">
							<input type="checkbox" name="rightAlign" lay-skin="switch" lay-text="TRUE|FALSE">
						</div>
					</div>
					<div class="layui-form-item">
						<label class="layui-form-label">是否含明细</label>
						<div class="layui-input-block" id="contain-detail-data">
							<input type="checkbox" name="containDetailData" checked="" lay-skin="switch"
								lay-text="TRUE|FALSE">
						</div>
					</div>
					
					<div class="layui-form-item">
						<label class="layui-form-label">隶属机构</label>
						<div class="layui-input-block" id="inst-switch">
							<input type="checkbox" name="instSwitch" lay-skin="switch"
								lay-text="TRUE|FALSE">
						</div>
					</div>
					
					<div class="layui-form-item" id="inst-info" style="display: none;">
						<label class="layui-form-label">机构信息</label>
						<div class="layui-input-inline">
							<select name="instId" id="inst" >
								
							</select>
						</div>
					</div>
					
					<div class="layui-form-item">
						<label class="layui-form-label">结尾内容</label>
						<div class="layui-input-block" id="contain-end-data">
							<input type="checkbox" name="containEndData" lay-skin="switch" lay-text="TRUE|FALSE">
						</div>
					</div>

				</div>
					<!-----------------------------------全局配置 end----------------------------------->

					<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
						<legend>动态文件名</legend>
					</fieldset>
					<div class="layui-form-item">
						<label class="layui-form-label">文件名</label>
						<div class="layui-input-block">
							<input type="text" style="width: 50%;" name="fileName" lay-verify="required"
								autocomplete="on" placeholder="例:templateName-yyyy-MM-dd-HH-mm-ss-${batchNo}.txt"
								class="layui-input">
						</div>
						<label class="layui-form-label">文件数量</label>
						<div class="layui-input-block">
							<input type="text" style="width: 30%;" name="fileCount" value="1" lay-verify="required"
								autocomplete="on" placeholder="例:templateName-yyyy-MM-dd-hh-mm-ss-${batch}.txt"
								class="layui-input">
						</div>
						<label class="layui-form-label">批次号</label>
						<div class="layui-input-block">
							<input type="text" style="width: 30%;" name="batchNo" autocomplete="on"
								placeholder="例:001.....最后一位必须为1" class="layui-input">
						</div>
						<label class="layui-form-label">验证日期</label>
						<div class="layui-input-inline">
							<input type="text" name="fileNameDate" id="fileNameDate" lay-verify="fileNameDate"
								placeholder="请选择文件名日期" autocomplete="on" class="layui-input">
						</div>
						<div class="layui-form-item">
							<label class="layui-form-label">是否压缩</label>
							<div class="layui-input-block" id="file-compress-switch">
								<input type="checkbox" name="fileCompressSwitch" lay-skin="switch"
									lay-text="TRUE|FALSE">
							</div>
						</div>
						<div id="file-compress-content" style="display: none;">
							<label class="layui-form-label">压缩文件名</label>
							<div class="layui-input-block">
								<input type="text" style="width: 30%;" name="fileCompressName" autocomplete="on"
									placeholder="请输入压缩文件名" class="layui-input">
							</div>
						</div>
						<div class="layui-form-item">
							<label class="layui-form-label">前置文件</label>
							<div class="layui-input-block" id="pre-file-switch">
								<input type="checkbox" name="preFileSwitch" lay-skin="switch" lay-text="TRUE|FALSE">
							</div>
						</div>
						<div id="pre-file-content" style="display: none;">
							<label class="layui-form-label">前置文件名</label>
							<div class="layui-input-block">
								<input type="text" style="width: 30%;" name="preFileNameSuffix" autocomplete="on"
									placeholder="请输入前置名后缀" class="layui-input">
							</div>
						</div>

					</div>

					<!-----------------------------------文件头 start----------------------------------->

					<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
						<legend>行首内容</legend>
					</fieldset>
					<div id="file-head-config">

						<div class="layui-form-item">
							<label class="layui-form-label">分隔符结尾</label>
							<div class="layui-input-block">
								<input type="checkbox" name="headSeparatorEnd" lay-skin="switch" lay-text="TRUE|FALSE">
							</div>
						</div>
						<div class="layui-form-item">


							<!-- 文件头自定义选择 -->
							<label class="layui-form-label">自定义字段</label>
							<div class="layui-input-inline">
								<select name="fileHeadCustomizeSelect" lay-filter="head-customize">
									<option value="1" selected="">自定义内容</option>
									<option value="2">按字段配置</option>
								</select>
							</div>

							<!-- 文件头自定义区域  -->
							<div id="file-head-content">

								<!-- 文件头文本库适合纵向数据或者 -->
								<div class="layui-form-item layui-form-text" id="file-head-customize-textarea">
									<label class="layui-form-label">自定义内容</label>
									<div class="layui-input-block">
										<textarea placeholder="请输入内容, 纵向数据适用" name="customizeTextarea"
											style="width: 60%;" class="layui-textarea"></textarea>
									</div>
								</div>

								<!-- 文件头自定义字段 -->
								<div id="file-head-customize-field"></div>

							</div>
						</div>

					</div>


					<div id="file-detail-content">
						<div id="stage" style="margin-bottom: 100px;">
							<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
								<legend>多阶段明细内容</legend>
							</fieldset>
							<div class="layui-form-item">
								<label class="layui-form-label">分隔符结尾</label>
								<div class="layui-input-inline">
									<input type="checkbox" name="detailSeparatorEnd" lay-skin="switch"
										lay-text="TRUE|FALSE">
								</div>
								<div class="layui-input-inline">
									<button type="button" class="layui-btn layui-btn-sm" id="add-stage">
										<i class="layui-icon">&#xe654;</i>
									</button>

									<button type="button" class="layui-btn layui-btn-sm" id="delete-stage">
										<i class="layui-icon">&#xe640;</i>
									</button>
								</div>
							</div>
							<div class="layui-form-item" style="display: none;">
								<label class="layui-form-label">阶段明细数</label>
								<div class="layui-input-inline">
									<input type="text" readonly="readonly" id="stage-count" name="stageCount"
										class="layui-input">
								</div>
							</div>

						</div>
					</div>


					<div id="file-end-content" style="display: none;">
						<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
							<legend>结尾内容</legend>
						</fieldset>
						<div class="layui-form-item">
							<label class="layui-form-label">内容</label>
							<div class="layui-input-block">
								<textarea placeholder="请输入结尾内容,可为空" name="endTextarea" style="width: 60%;"
									class="layui-textarea"></textarea>
							</div>
						</div>
					</div>
					<div class="layui-form-item">
						<div class="layui-input-block">
							<button type="submit" class="layui-btn" lay-submit="" lay-filter="request">立即提交</button>
							<button type="reset" class="layui-btn layui-btn-primary">重置</button>

						</div>
					</div>
			</form>
			<!-- </div> -->
		</div>
		<script src="layui/layui.js" charset="utf-8"></script>
		<script src="layui/jquery-3.6.0.min.js"></script>
		<script>
			layui.config({
				base: 'js/', //静态资源所在路径
			}).extend({
				index: 'http', //主入口模块
			}).use(['form', 'layedit', 'laydate', 'jquery', 'element', 'layer', 'util', 'http'], function() {
				var form = layui.form;
				var layer = layui.layer;
				var layedit = layui.layedit;
				var laydate = layui.laydate;
				var element = layui.element;
				var api = layui.http.api;
				var $ = layui.jquery;
				var headIndex = 1;
				var stageIndex = 1;

				laydate.render({
					elem: '#fileNameDate',
					type: 'datetime'
				});


				//隶属机构开关
				$("div#inst-switch").click(function() {
					let val = $("#inst-switch div em").html();
					if (val == 'TRUE') {
						$('#inst').empty();
						$.ajax({
							type: 'POST',
							url: api + 'inst/getAll',
							dataType: 'json',
							success: function(result) {
								var length = result.data.length;
								if (length > 0) {
									var list = result.data;
									let option = '';
									for (var i = 0; i < list.length; i++) {
										var inst = list[i];
										option = option.concat('<option value="' + inst['instId'] + '">' + inst[
												'name'] +
											'</option>')
									}
									$('#inst').append(option);
									form.render();
								};
							},
							error: function(result) {
								layer.msg('网络异常,加载数据库列表失败,稍后重试', {
									icon: 5
								});
							}
						});
						$('#inst-info').show();
					} else {
						$('#inst-info').hide();
					}
				});


				$(document).on("click", "#delete-stage", function() {
					if (stageIndex == 1) {
						return;
					}
					$('#stage-content-' + (stageIndex - 1)).remove();
					console.log("删除stage-content: " + (stageIndex - 1))
					stageIndex--;
					$('#stage-count').val((stageIndex - 1))
				})

				$(document).on("click", "#add-stage", function() {
					let index = layer.open({
						type: 2, //Page 层类型
						title: '多阶段明细内容',
						shade: 0.6, //遮罩透明度
						anim: 0, //0-6的动画形式，-1不开启,
						content: 'detail.html',
						maxmin: true, //允许全屏最小化
						scrollbar: false
					});
					let div = '<div class="layui-form-item layui-form-text" id="stage-content-' + stageIndex +
						'">' +
						'<label class="layui-form-label">明细' + stageIndex + '</label>' +
						'<div class="layui-input-block">' +
						'<textarea type="text" id="stage-' + index + '" ' +
						' name="multi-detail-' + stageIndex + '" style="width: 60%;"' +
						'class="layui-input"></textarea></div>' +
						'</div>';
					$('#stage').append(div);
					console.log(index);
					$('#stage-count').val(stageIndex)
					stageIndex++;
					layer.full(index);
				})

				//自定义字段切换
				form.on('select(head-customize)', function(data) {
					// 文件头文本框适合纵向数据或者
					let customizeTextarea = '<label class="layui-form-label">自定义内容</label>' +
						'<div class="layui-input-block">' +
						'<textarea placeholder="请输入内容, 纵向数据适用" name="customizeTextarea" style="width: 60%;"' +
						'class="layui-textarea"></textarea>' +
						'</div>';


					//文件头自定义字段
					let headCustomizefield = '<div class="layui-form-item">' +
						'<div class="layui-inline">' +
						'<label class="layui-form-label">行首字段数</label>' +
						'<div class="layui-input-inline">' +
						'<input type="text" name="fileHeadCount" id="file-head-count" readonly="readonly" value="1" autocomplete="on" class="layui-input">' +
						'</div>' +
						'</div>' +
						'</div>' +
						'<!-- 字段数据随机生成配置 -->' +
						'<div class="layui-form-item" id="head-filed-0">' +
						'<div id="head-filed-0">' +
						'<label class="layui-form-label">随机数据</label>' +
						'<div class="layui-input-inline">' +
						'<select name="headRandomData-0" id="head-random-data-0" lay-filter="headRandomData">' +
						'<option value="0" selected="">自定义字段内容</option>' +
						'<option value="1">随机UUID</option>' +
						'<option value="2">随机数字</option>' +
						'<option value="3">随机金额</option>' +
						'<option value="6">随机日期</option>' +
						'</select>' +
						'</div>' +


						'<div id="head-filed-content-0">' +
						'<label class="layui-form-label">自定义内容</label>' +
						'<div class="layui-input-inline">' +
						'<input type="text" name="filedHeadContent-0"' +
						'autocomplete="on" placeholder="多个值可|分隔,随机选取一个"class="layui-input">' +
						'</div>' +
						'</div>' +


						'<div id="head-add-template-0"></div>' +
						'<div class="layui-btn-group">' +
						'<button type="button" class="layui-btn" id="head-field-add">' +
						'<i class="layui-icon layui-icon-add-circle"></i>' +
						'</button>' +
						'<button type="button" class="layui-btn" id="head-field-delete">' +
						'<i class="layui-icon layui-icon-reduce-circle"></i>' +
						'</button>' +
						'</div>' +
						'</div>' +
						'</div>';

					if (data.value == 1) {
						$('#file-head-customize-textarea').empty();
						$('#file-head-customize-field').empty();
						$('#file-head-customize-textarea').append(customizeTextarea);
					} else {
						$('#file-head-customize-field').empty();
						$('#file-head-customize-textarea').empty();
						$('#file-head-customize-field').prepend(headCustomizefield);
					}
					form.render();
				});


				//文件头字段增加
				$(document).on("click", "#head-field-add", function() {
					let headfiled = '<!-- 字段数据随机生成配置 -->' +
						'<div class="layui-form-item" id="head-filed-' + headIndex + '">' +
						'<label class="layui-form-label">随机数据</label>' +
						'<div class="layui-input-inline">' +
						'<select name="headRandomData-' + headIndex + '" id="head-random-data-' + headIndex +
						'" lay-filter="headRandomData">' +
						'<option value="0" selected="">自定义随机内容</option>' +
						'<option value="1">随机UUID</option>' +
						'<option value="2">随机数字</option>' +
						'<option value="3">随机金额</option>' +
						'<option value="6">随机日期</option>' +
						'</select>' +
						'</div>' +
						'<div id="head-filed-content-' + headIndex + '">' +
						'<label class="layui-form-label">自定义内容</label>' +
						'<div class="layui-input-inline">' +
						'<input type="text" name="filedHeadContent-' + headIndex +
						'" autocomplete="on" placeholder="多个值可|分隔,随机选取一个"' +
						'class="layui-input">' +
						'</div>' +
						'</div>' +
						'<div id="head-add-template-' + headIndex + '"></div>' +
						'</div>';
					$('#file-head-customize-field').append(headfiled);
					console.log("增加head-filed: " + headIndex)
					form.render();
					headIndex++;
					$('#file-head-count').val(headIndex);
				});

				//文件头字段删除
				$(document).on("click", "#head-field-delete", function() {
					if (headIndex == 1) {
						return;
					}
					$('#head-filed-' + (headIndex - 1) + '').remove();
					console.log("删除head-filed: " + (headIndex - 1))
					form.render();
					headIndex--;
					$('#file-head-count').val(headIndex);
				});

				//文件头动态选择字段
				form.on('select(headRandomData)', function(data) {
					let eleid = data.elem.id;
					let id = eleid.split("-")[3];
					$('#head-add-template-' + id).empty();
					if (data.value == 1 || data.value == 2) { //增加自定义内容前缀
						$('#head-filed-content-' + id).hide();
						let div = '<label class="layui-form-label">数据长度</label>' +
							'<div class="layui-input-inline">' +
							'<input type="text" name="headFiledLength-' + id +
							'" autocomplete="on" placeholder="请输入长度"' +
							'class="layui-input">' +
							'</div>' +
							'<label class="layui-form-label">前后缀使用</label>' +
							'<div class="layui-input-inline">' +
							'<input type="text" name="filedHeadAffix-' + id +
							'" autocomplete="on" placeholder="可为空,left|内容,或right|内容"class="layui-input">' +
							'</div>'
						$('#head-add-template-' + id).append(div);
					} else if (data.value == 3) { //增加小数小数位选择
						$('#head-filed-content-' + id).hide();
						let div = '<label class="layui-form-label">整数位</label>' +
							'<div class="layui-input-inline">' +
							'<select name="chainAmount-' + id + '">' +
							'<option value="10">1</option>' +
							'<option value="100">2</option>' +
							'<option value="1000">3</option>' +
							'<option value="10000">4</option>' +
							'<option value="100000">5</option>' +
							'<option value="1000000">6</option>' +
							'<option value="10000000">7</option>' +
							'<option value="100000000">8</option>' +
							'</select>' +
							'</div>' +
							'<label class="layui-form-label">小数位</label>' +
							'<div class="layui-input-inline">' +
							'<select name="headAmountNumber-' + id + '">' +
							'<option value="0" selected="">0</option>' +
							'<option value="1">1</option>' +
							'<option value="2">2</option>' +
							'<option value="3">3</option>' +
							'<option value="4">4</option>' +
							'<option value="5">5</option>' +
							'<option value="6">6</option>' +
							'<option value="7">7</option>' +
							'<option value="8">8</option>' +
							'</select>' +
							'</div>'

						$('#head-add-template-' + id).append(div);
					} else if (data.value == 6) { //动态增加日期选择框
						$('#head-filed-content-' + id).hide();
						let dateformat = '<label class="layui-form-label">日期格式</label>' +
							'<div class="layui-input-inline">' +
							'<select name="headRandomDate-' + id + '" id="head-random-date-' + id +
							'" lay-filter="headRandomDate">' +
							'<option value="yyyy-MM-dd" selected="">yyyy-MM-dd</option>' +
							'<option value="yyyyMMdd">yyyyMMdd</option>' +
							'<option value="yyyy-MM-dd HH:mm:ss">yyyy-MM-dd HH:mm:ss</option>' +
							'<option value="yyyy-MM-dd HH-mm-ss">yyyy-MM-dd HH-mm-ss</option>' +
							'<option value="yyyy-MM-ddHH:mm:ss">yyyy-MM-ddHH:mm:ss</option>' +
							'<option value="yyyy-MM-ddHH-mm-ss">yyyy-MM-ddHH-mm-ss</option>' +
							'<option value="yyyyMMddHHmmss">yyyyMMddHHmmss</option>' +
							'<option value="yyyy/MM/dd HH/mm/ss">yyyy/MM/dd HH/mm/ss</option>' +
							'<option value="yyyy/MM/ddHH/mm/ss">yyyy/MM/ddHH/mm/ss</option>' +
							'</select>' +
							'</div>'
						$('#head-add-template-' + id).append(dateformat);

						let dateSelect = '<label class="layui-form-label">请选择日期</label>' +
							'<div class="layui-input-inline">' +
							'<input type="text" id="head-filed-date-' + id + '" name="headFiledDate-' + id +
							'" autocomplete="on" placeholder="例如yyyy-MM-dd"class="layui-input">' +
							'</div>';
						$('#head-add-template-' + id).append(dateSelect);
					} else {
						$('#head-filed-content-' + id).show();
					}
					form.render();
				});


				//文件头字段日期格式渲染
				form.on('select(headRandomDate)', function(data) {
					var eleid = data.elem.id;
					let id = eleid.split("-")[3];
					let val = data.value;
					$('#head-filed-date-' + id).val("");
					if (val.search('H') != -1) {
						laydate.render({
							format: val,
							elem: '#head-filed-date-' + id,
							type: 'datetime',
							show: true
						});
					} else {
						laydate.render({
							format: val,
							elem: '#head-filed-date-' + id,
							type: 'date',
							show: true
						});
					}
				});

				//是否包含尾部数据
				$("div#contain-end-data").click(function() {
					let val = $("#contain-end-data div em").html();
					if (val == 'TRUE') {
						$('#file-end-content').show();
					} else {
						$('#file-end-content').hide();
					}
				});

				//是否包含明细数据
				$("div#contain-detail-data").click(function() {
					let val = $("#contain-detail-data div em").html();
					if (val == 'TRUE') {
						$('#file-detail-content').show();
					} else {
						$('#file-detail-content').hide();
					}
				});

				//是否压缩文件
				$("div#file-compress-switch").click(function() {
					let val = $("#file-compress-switch div em").html();
					if (val == 'TRUE') {
						$('#file-compress-content').show();
					} else {
						$('#file-compress-content').hide();
					}
				});

				//前置文件名
				$("div#pre-file-switch").click(function() {
					let val = $("#pre-file-switch div em").html();
					if (val == 'TRUE') {
						$('#pre-file-content').show();
					} else {
						$('#pre-file-content').hide();
					}
				});


				//提交表单
				form.on('submit(request)', function(data) {
					layer.confirm('是否保存模板？', {
						btn: ['保存', '不需要'] //按钮
					}, function(index) {
						layer.prompt({
							formType: 0,
							title: '请输入模板名称',
							btnAlign: 'c'
						}, function(value, index, elem) {
							$.ajax({
								type: 'POST',
								url: api + 'file/generate',
								data: {
									'data': JSON.stringify(data.field),
									'fileTemplateName': value
								},
								dataType: 'json',
								success: function(result) {
									layer.load();
									setTimeout(function() {
										layer.closeAll('loading');
										layer.alert('文件生成结果:{' + result.msg +
											'}' +
											'<br/>' +
											'文件输出路径:{' + result.data +
											'}', {
												icon: 6
											});
									}, 1500);
								},
								error: function(result) {
									layer.msg('网络异常,稍后重试', {
										icon: 5
									});
								}
							});
							layer.close(index);
						});
						layer.close(index);
					}, function() {
						$.ajax({
							type: 'POST',
							url: api + 'file/generate',
							data: {
								'data': JSON.stringify(data.field)
							},
							dataType: 'json',
							success: function(result) {
								layer.load();
								setTimeout(function() {
									layer.closeAll('loading');
									layer.alert('文件生成结果:{' + result.msg + '}' +
										'<br/>' +
										'文件输出路径:{' + result.data + '}', {
											icon: 6
										});
								}, 1500);
							},
							error: function(result) {
								layer.msg('网络异常,稍后重试', {
									icon: 5
								});
							}
						});
					});
					return false;
				});
			});
		</script>
	</body>
</html>
